<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css" rel="stylesheet" />
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
    <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
    <style>
        .layui-form-item .layui-input-inline {
            width: 150px;
        }

        .layui-form-label {
            padding: 9px 5px;
            width: auto;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">

            <form class="layui-form" action="" id="sbumitForm">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">视频标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" placeholder="视频标题" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline ">
                            <label class="layui-form-label">视频类型</label>
                            <div class="layui-input-inline" style="width: 110px">
                                <select name="type">
                                    <option value="">全部</option>
                                    <?php foreach($types as $key => $value) { ?>
                                    </php>
                                    <option value="{$key}">{$value}</option>
                                    <?php }?>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline ">
                            <label class="layui-form-label">视频状态</label>
                            <div class="layui-input-inline" style="width: 110px">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">待审核</option>
                                    <option value="1">已上架</option>
                                    <option value="2">已下架</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">筛选时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="start_time" id="start_time" placeholder="开始时间"
                                    autocomplete="off" class="layui-input" readonly
                                    style="width: 155px;display: inline">
                            </div>
                        </div>
                        <div class="layui-inline" style="padding-left: 0px;padding-right: 0px;">
                            至
                        </div>

                        <div class="layui-inline">
                            <div class="layui-input-inline" id="end_time_div">
                                <input type="text" name="end_time" id="end_time" placeholder="结束时间" autocomplete="off"
                                    class="layui-input" readonly style="width: 155px;display: inline">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn" id="FormSubmit">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: "/layuiadmin/", //静态资源所在路径
        }).extend({
            index: "lib/index", //主入口模块
        }).use(["table", "laydate"], function () {
            $ = layui.jquery, form = layui.form, table = layui.table, laydate = layui.laydate;;

            table.render(table_conf());

            $("#FormSubmit").click(function () {
                table.render(table_conf());
            });

            $(this).removeAttr("lay-key");
            laydate.render({
                elem: '#start_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
                done: function (value, date, endDate) {
                    $("#end_time_div").empty();
                    $("#end_time_div").append('<input type="text" name="end_time" id="end_time"  placeholder="结束时间" autocomplete="off" class="layui-input" readonly style="width: 155px;display: inline">');
                    laydate.render({
                        elem: '#end_time', //指定元素
                        trigger: 'click',
                        min: value,
                        max: '<?php echo date("Y-m-d");?>',
                    });
                },
            });

            laydate.render({
                elem: '#end_time', //指定元素
                trigger: 'click',
                max: '<?php echo date("Y-m-d");?>',
            })

        });

        function table_conf() {
            return {
                elem: '#demo',
                id: '#demo',
                url: '/admin/video/index?' + $("#sbumitForm").serialize(),
                defaultToolbar: [
                    'filter', 'print', { title: '提示', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-table' },
                ],
                page: {
                    curr: 1   //默认从第一页开始搜索
                },
                method: "get",
                //where: $("#sbumitForm").serialize(),
                limit: 20,
                limits: [20, 30, 50, 100, 200],
                text: {
                    none: '暂无相关数据！'//默认无数据
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'list',
                },
                cols: [[ //表头
                    { field: 'id', title: 'ID', width: "80", align: "center", },
                    { field: 'title', title: '视频标题', width: "220", align: "center", },
                    {
                        field: 'type', title: '视频类型', width: "110", align: "center", templet: function (item) {
                            switch (item.type) {
                                case 1:
                                    return '足球';
                                case 2:
                                    return '篮球';
                                case 3:
                                    return '娱乐';
                                case 4:
                                    return '电竞';
                                case 5:
                                    return '回放';
                                case 6:
                                    return '其他';
                            }

                            return '-';
                        }
                    },
                    /***
                    {
                        field: '', title: '是否热门', width: "100", align: "center", templet: function (item) {
                            if (item.is_hot) {
                                return '是';
                            }
                            return '否';
                        }
                    },***/
                    {
                        field: '', title: '横/竖 屏', width: "100", align: "center", templet: function (item) {
                            if (item.direction) {
                                return '竖屏';
                            }
                            return '横屏';
                        }
                    },
                    { field: 'like_count', title: '点赞次数', width: "110", align: "center", },
                    { field: 'play_count', title: '观看次数', width: "110", align: "center", },
                    {
                        field: '', title: '状态', width: "110", align: "center", templet: function (item) {
                            switch (item.status) {
                                case 0:
                                    return '<font color="red">待审核</font>';
                                case 1:
                                    return '已上架';
                                case 2:
                                    return '<font color="#F6A133">已下架</font>';
                            }

                            return '-';
                        }
                    },
                    { field: 'create_time', title: '发布时间', width: "160", align: "center" },
                    { field: 'play_url', title: '地址', width: "180", align: "center" },
                    {
                        field: 'operator', title: '操作人', width: "150", align: "center", templet: function (item) {
                            if (item.operator) {
                                return item.operator;
                            }

                            return '系统';
                        }
                    },
                    {
                        title: '操作', align: "center", fixed: 'right', width: "260", templet: function (item) {
                            var html = '<a class="layui-btn  layui-btn-xs" lay-event="preview" style="background-color: #1E9FFF" onclick="preview(\'' + item['play_url'] + '\')"><i class="layui-icon"></i>预览</a>';
                            if (item.status == 1) {
                                html += '<a class="layui-btn  layui-btn-xs" style="background-color: #F6A133" onclick="status(' + item['id'] + ', 2)"><i class="layui-icon"></i>下架</a>';
                            } else if (item.status == 2) {
                                html += '<a class="layui-btn  layui-btn-xs" style="background-color: #F6A133" onclick="status(' + item['id'] + ', 1)"><i class="layui-icon"></i>上架</a>';
                            }

                            html += '<a class="layui-btn  layui-btn-xs" onclick="edit(' + item['id'] + ')"><i class="layui-icon"></i>编辑</a>';
                            html += '<a class="layui-btn  layui-btn-danger layui-btn-xs"  onclick="del(' + item['id'] + ')"><i class="layui-icon"></i>删除</a>';

                            return html;
                        }
                    }
                ]],
                done: function (res, curr, count) {
                    res.list.forEach(function (item, index) {

                    });
                },
            };
        }

        function preview(url) {
            var html = ` 
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div id="id_player" style='width: 800px; height: 400px;'></div>
                </div>
            </div>
            <script>
                var player = new TcPlayer('id_player', {
                    "m3u8": '`+ url + `', 
                    "autoplay" : true,      
                    "poster" : "",
                    'live' : 'true'
                });
            <\/script>`

            layer.open({
                type: 1,
                title: "视频预览",
                content: html,
                area: ["800px", "450px"],
            });
        }

        function status(id, status) {
            var title = status == 1 ? '上架' : '下架';
            layer.confirm('确认要' + title + '吗？', { icon: 6 }, function () {
                $.ajax({
                    type: "POST", //请求方式
                    url: '/admin/video/status', //请求地址
                    dataType: "json", //返回的数据类型
                    data: { status: status, id: id }, //数据
                    //请求成功
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, { icon: 2, time: 5000 });
                        }
                    }
                });
            });
        }

        function del(id) {
            layer.confirm('确认要删除吗？', { icon: 6 }, function () {
                $.ajax({
                    type: "POST", //请求方式
                    url: '/admin/video/del', //请求地址
                    dataType: "json", //返回的数据类型
                    data: { id: id }, //数据
                    //请求成功
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, { icon: 1, time: 2000 }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, { icon: 2, time: 5000 });
                        }
                    }
                });
            });
        }

        function edit(id) {
            layer.open({
                type: 2,
                title: ["编辑", 'font-size:16px'],
                content: '/admin/video/edit?id=' + id,
                area: ['650px', '610px'],
                //offset: '0px',
            });
        }
    </script>
</body>

</html>